import React from 'react';
import "./index.css";

// 导入漏油
import { Route } from "react-router-dom";
// 导入子组件
import Index from "../Index";
import HouseList from "../HouseList";
import News from "../News";
import Login from "../Login";
import Profile from "../Profile";

import { TabBar } from 'antd-mobile';


// 引入字体图标
import "../../assets/fonts/iconfont.css";



// tabBar的公共数据---遍历
const TabBarData = [
    {
        title: '首页', icon: 'icon-ind', path: '/home'
    },
    {
        title: '找房', icon: 'icon-findHouse', path: '/home/list'
    },
    {
        title: '资讯', icon: 'icon-infom', path: '/home/news'
    },
    {
        title: '我的', icon: 'icon-my', path: '/home/Profile'
    },
]



export default class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedTab: this.props.location.pathname,//选中的
        };
    }
    // 渲染tabBar
    renderTabBar() {
        return (
            TabBarData.map(
                (item) => (
                    <TabBar.Item
                        title={item.title}
                        key={item.title}
                        icon={
                            <i className={`iconfont ${item.icon}`} />
                        }
                        selectedIcon={
                            <i className={`iconfont ${item.icon}`} />
                        }
                        selected={this.state.selectedTab === item.path}
                        onPress={() => {
                            this.setState({
                                selectedTab: item.path,
                            });
                            this.props.history.push(item.path)
                        }}
                    >
                    </TabBar.Item>
                )
            )
        )
    }

    // 当Home组件的内容发生更新的时候调用
    // 解决切换组件时，tabBar不高亮的问题
    componentDidUpdate(prevProps) {
        if (prevProps.location.pathname === this.props.location.pathname) return
        this.setState({
            selectedTab: this.props.location.pathname
        })
    }

    render() {
        return (
            <div className='home'>
                {/* 渲染子漏油 */}
                <Route exact path="/home" component={Index}></Route>
                <Route path="/home/list" component={HouseList}></Route>
                <Route path="/home/news" component={News}></Route>
                <Route path="/home/Profile" component={Profile}></Route>

                {/* 导航 */}
                <TabBar
                    unselectedTintColor="#949494"
                    tintColor="#33A3F4"
                    barTintColor="white"
                    noRenderContent="true"
                >
                    {this.renderTabBar()}
                </TabBar>
            </div>
        );
    }
}